<template>
    <div>
        <div class="img-container">
            <ImageContainer size="20" :src="$store.state.user.data.avatar"/>
            <div>
                <input id="avatar" type="file" ref="avatar" v-show="false" @change="uploadAvatar($event)"></input>
                <el-button @click="getInput('avatar')">修改头像</el-button>
            </div>
        </div>
        <div class="line-container">
            <LineInfo
                    class="lineInfo"
                    field="昵称"
                    v-model="nickname"
                    @updateField="changeNickname"
                    @resetField="nickname = $store.state.user.data.nickname"
            />
            <LineInfo class="lineInfo" field="邮箱" v-model="email" :append="false"/>
            <LineInfo
                    class="lineInfo"
                    field="密码"
                    v-model="password"
                    placeholder="点击编辑修改密码"
                    @updateField="changePassword"
                    @resetField="password = ''"
            />
        </div>
    </div>
</template>

<script>
    import ImageContainer from "../../Image/ImageContainer";
    import LineInfo from "./LineInfo";
    import {validUploadImg} from "../../../utils/upload";

    export default {
        name: "UserInfo",
        data(){
            return{
                nickname: this.$store.state.user.data.nickname,
                email: this.$store.state.user.data.email,
                password: "",
            }
        },
        methods:{
            /**
             * 修改昵称
             */
            async changeNickname(edit){
                this.$confirm('确定修改昵称吗？', '退出登录', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(async () =>{
                    this.nickname !== this.$store.state.user.data.nickname
                    &&
                    this.validNickname()
                    &&
                    await this.$store.dispatch("user/changeNickname", this.nickname);
                    this.nickname = this.$store.state.user.data.nickname;
                    edit();
                }).catch(() => {

                })
            },
            /**
             * 验证昵称
             */
            validNickname(){
                let size = this.nickname.length;
                if(size < 1 || size > 35){
                    this.$msg.warning("昵称长度只能在1~35之间！");
                    return false;
                }
                return true;
            },
            /**
             * 修改密码
             */
            async changePassword(edit){
                this.$confirm('确定修改密码吗？', '退出登录', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(async () => {
                    await this.$store.dispatch("user/changePassword", this.password)
                    this.password = "";
                    edit();
                }).catch(() => {

                });
            },
            /**
             * 上传头像
             */
            uploadAvatar(event){
                let files = event.target.files;
                if(files.length === 0){
                    return;
                }
                let file = files[0];
                if(validUploadImg(file)){
                    let formData = new FormData();
                    formData.append("avatar", file);
                    this.$store.dispatch("user/uploadAvatar", formData);
                }
            },
            /**
             * 触发input
             * @param ref input的ref名
             */
            getInput(ref){
                this.$refs[ref].dispatchEvent(new MouseEvent('click'));
            }
        },
        components: {LineInfo, ImageContainer}
    }
</script>

<style scoped>
    /deep/.el-input-group__append{
        background-color: #ffffff;
    }
    .line-container{
        display: inline-block;
        vertical-align: top;
        margin-left: 2rem;
    }
    .lineInfo{
        margin-bottom: 2rem;
    }
    .img-container{
        display: inline-block;
        text-align: center;
    }
</style>